<!-- 批号调整单 -->
<template>
  <div class="content">
    <div class="content-head">
      <el-form :inline="true" :model="formData" label-position="left" size="mini">
        <el-form-item label="单据编号" label-width="70px" class="form-item">
          <el-input v-model="formData.orderNumber" placeholder="请输单据编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" icon="el-icon-refresh-left" @click="reset">重置</el-button>
          <el-button type="success" size="mini" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content-table">
      <el-table :data="tableData" v-loading="tableLoading" style="width: 100%;" :max-height="tableMaxHeight" row-key="id" :tree-props="{children: 'lotAdjustDetailList', hasChildren: 'hasChildren'}" :default-expand-all="false">
        <el-table-column type="index" label="序号" width="55"> </el-table-column>
        <el-table-column prop="orderNumber" label="单据编号" width=""></el-table-column>
        <el-table-column prop="stateName" label="单据状态" align="" width=""></el-table-column>
        <el-table-column prop="createdDate" label="日期" width=""></el-table-column>
        <el-table-column prop="documentType" label="单据类型" align="center" width=""></el-table-column>
        <el-table-column prop="materialCode" label="物料编码" align="center" width=""></el-table-column>
        <el-table-column prop="materialName" label="物料名称" align="center" width=""></el-table-column>
        <el-table-column prop="unitOne" label="单位" align="center" width=""></el-table-column>
        <el-table-column prop="warehouseName" label="仓库名称" align="center" width=""></el-table-column>
        <el-table-column prop="conversionQuantity" label="转换数量" align="center" width=""></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="detail(scope.row)" type="text" size="small">详情</el-button>
            <!-- <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="content-footer">
      <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,40,80,100,200]" :page-size="pageSize" background layout="prev, pager, next,total, sizes, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>
    
<script>
import { portrait, autoOrientation, fullscreen } from "@/utils/rotatingScreen.js";
import { loadListapi } from "@/api/BatchNumberAdjustmentForm";
import TableHeadFilter from "@/components/tableHeadFilter/index.vue";
export default {
  name:"BatchNumberAdjustmentForm",  //批号调整单
  components:{
    TableHeadFilter
  },
  data() {
    return {
      formData:{
        orderNumber:""
      },
      tableData:[],
      currentPage:1,
      pageSize:10,
      total:0,
      tableLoading:false,
      tableMaxHeight:450
    }
  },
  mounted(){
    //精致环境下进行自动旋转
    //autoOrientation();
    this.loadlist()
    this.calculateTableMaxHeight();
    window.addEventListener("resize",this.calculateTableMaxHeight);
    document.title = "批号调整单";
  },
  beforeDestroy(){
    window.removeEventListener("resize",this.calculateTableMaxHeight);
  },
  methods:{
    //分页器
    handleCurrentChange(curPage){
      this.currentPage = curPage;
      this.loadlist();
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize;
      this.loadlist();
    },
    calculateTableMaxHeight(){
      const dom = document.querySelector(".content-table");
      this.$nextTick(() => {
        this.tableMaxHeight = dom.offsetHeight - 10;
      })
    },
    //重置
    reset(){
      this.formData.orderNumber = "";
      this.loadlist();
    },
    //查询
    search(){
      const searchStr = this.formData.orderNumber;
      if(!searchStr){
        this.$message({type:"warning",message:"请输入单据编号后查询"});
        return;
      }
      this.loadlist();
    },
    loadlist(){
      const { orderNumber } = this.formData;
      const parameter = {current:this.currentPage,size:this.pageSize,orderNumber};
      this.tableLoading = true;
      loadListapi(parameter).then(res => {
        if(res.data.code === 200){
          this.tableData = res.data.data.content;
          this.total = res.data.data.totalElements;
        }
        console.log('分页请求批号调整单列表信息',res);
        this.tableLoading = false;
      },error => {
        this.$message({type:"error",message:"生产入库列表信息请求失败"});
        this.tableLoading = false;
        console.log('分页请求批号调整单列表信息',error);
      })
    },
    detail(row){
      this.$router.push({name: "BatchNumberAdjustmentFormDetail",params:{row:row,type:'detail'}});
    },
    edit(row){
      this.$router.push({name: "BatchNumberAdjustmentFormDetail",params:{row:row,type:'edit'}});
    }
  }
}
</script>
    
  <style lang='scss' scoped>
  .content{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1%;
    box-sizing: border-box;
  
    .content-head{
      flex: 0.5;
      .form-item{
        margin-right: 2vw;
      }
    }
    .content-table{
      flex: 9;
      margin: 10px 0;
      .table-date{
        width: 100%;
        height: 2%;
        min-height: 15px;
        margin-bottom: 0.5%;
        display: flex;
        justify-content: right;
      }
      .table-main{
        width: 100%;
        height: 98%;
      }
    }
    .content-footer{
      flex: 0.5;
      display: flex;
      justify-content: flex-end;
    }
  }
  ::v-deep .el-table__header th {
    padding: 0; /* 调整上下内边距 */
  }
  ::v-deep .el-table__row {
    margin-bottom: 15px; /* 调整这个值来改变行间距 */
    height: 60px;
  }
  ::v-deep .el-table .el-table__cell{
    padding: 0;
  }
  
  </style>